<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
	<link rel="stylesheet" type="text/css" media="screen" href="cssbg/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" media="screen" href="cssbg/font-awesome.min.css">
		<!-- SmartAdmin Styles : Caution! DO NOT change the order -->
		<link rel="stylesheet" type="text/css" media="screen" href="cssbg/smartadmin-production-plugins.min.css">
		<link rel="stylesheet" type="text/css" media="screen" href="cssbg/smartadmin-production.min.css">
		<link rel="stylesheet" type="text/css" media="screen" href="cssbg/smartadmin-skins.min.css">
		<link rel="stylesheet" type="text/css" media="screen" href="cssbg/smartadmin-angular.css">
		<!-- SmartAdmin RTL Support (Not using RTL? Disable the CSS below to save bandwidth) -->
		<link rel="stylesheet" type="text/css" media="screen" href="cssbg/smartadmin-rtl.min.css">
		<link rel="stylesheet" type="text/css" media="screen" href="cssbg/demo.min.css">
		<!-- #FAVICONS -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- Startup image for web apps -->
        <link href="cssbg/video-js.css" rel="stylesheet">
	<style>
	*{margin: 0;padding: 0;}
	.box{width: 80%;height: 30px;background-color: #d8e5f8;float: left;}
	.box span{font-size: 20px;}
	#lc{float: right;width: 300px;height: 30px;}
	.box1{width: 80%;height: 800px;float: left;}
	.box2{width: 80%;height: 30px;background-color: #d8e5f8;float: left;}
	.box2 span{font-size: 20px;}
	.box3{width: 80%;height: 100px;float: left;}
	.right{width: 20%;height: 960px;float: right;margin-top: -860px;}
	.right1{width: 100%;height: 30px;background-color: #d8e5f8;}
	.right1 span{font-size: 20px;}
	#tab ul{overflow: hidden;}
	#tab ul li{width: 112px;height: 60px;background: gray;text-align: center;line-height: 50px;font-size: 20px;color: #EEE;font-family: Arial;float: left;list-style: none;border: 4px solid #000;}
	#tab div{width: 100%;height: 740px;font-size: 15px;font-family:Arial;color:#000;display:none;background-color: #e0f4fd;border: 2px solid #000;margin-top: -10px;}
	.right2{width: 100%;height: 30px;background-color: #d8e5f8;font-size: 20px;}
	</style>
</head>
<body>
<!-- <div class="zong"> -->
	<div class="box">
		<span>工程名称：</span>
		<select name="" id="lc">
			<option value="粮仓1">粮仓1</option>
			<option value="粮仓1">粮仓2</option>
			<option value="粮仓1">粮仓3</option>
			<option value="粮仓1">粮仓4</option>
			<option value="粮仓1">粮仓5</option>
			<option value="粮仓1">粮仓6</option>
			<option value="粮仓1">粮仓7</option>
			<option value="粮仓1">粮仓8</option>
			<option value="粮仓1">粮仓9</option>
			<option value="粮仓1">粮仓10</option>
		</select>
	</div>
	<div class="box1">
		
	</div>
	<div class="box2">
		<span>当前记录：</span>
	</div>
	<div class="box3">
	<div class="table=responsive">
		<table class="table table-bordered table-striped table-condensed table-hover smart-form">
			<thead>
				<tr>
					<th>测试时间</th>
					<th>粮仓编号</th>
					<th>粮仓类型</th>
					<th>测点数量</th>
					<th>天气状态</th>
					<th>仓内温度</th>
					<th>仓外温度</th>
					<th>仓内湿度</th>
					<th>仓外湿度</th>
					<th>最高温度</th>
					<th>平均温度</th>
					<th>最低温度</th>
					<th>高温数量</th>
					<th>低温数量</th>
					<th>故障数量</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="item in granaryData" class="ng-scope">
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
					<td class="ng-binding">平房仓</td>
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
				</tr>
				<tr ng-repeat="item in granaryData" class="ng-scope">
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
					<td class="ng-binding">平房仓</td>
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
					<td class="ng-binding"></td>
				</tr>
			</tbody>
		</table>
	</div>
	</div>
	<div class="right">
	<div class="right1">
		<span>显示控制</span>
	</div>
		<div id="tab">
		<ul>
			<li style="background:orange;">模型</li>
			<li>报表</li>
			<li>图表</li>
		</ul>
		<div style="display:block;">
		   	<span>采集方法</span><br />
		   	<img style="margin-left:50px;width:72px;height:72px;" src="imgs/aa.png" alt="" />
		   	<img style="margin-left:70px;width:72px;height:72px;" src="imgs/bb.png" alt="" /><br />
		   	<input style="margin-left:50px;" type="radio" name="单一采集" />单一采集
		   	<input style="margin-left:70px;" type="radio" checked="checked" name="统一采集" />统一采集<br />
		   	<span>日期选择</span><br />
		   	<span>开始</span>
		   	<select name="" id="">
		   		<option value="2017年">2013年</option>
		   		<option value="2017年">2014年</option>
		   		<option value="2017年">2015年</option>
		   		<option value="2017年">2016年</option>
		   		<option value="2017年">2017年</option>
		   	</select>
		   	<select name="" id="">
		   		<option value="1月">1月</option>
		   		<option value="1月">2月</option>
		   		<option value="1月">3月</option>
		   		<option value="1月">4月</option>
		   		<option value="1月">5月</option>
		   		<option value="1月">6月</option>
		   		<option value="1月">7月</option>
		   		<option value="1月">8月</option>
		   		<option value="1月">9月</option>
		   		<option value="1月">10月</option>
		   		<option value="1月">11月</option>
		   		<option value="1月">12月</option>
		   	</select>
		   	<br />
		   	<span>截止</span>
		   	<select name="" id="">
		   		<option value="2017年">2013年</option>
		   		<option value="2017年">2014年</option>
		   		<option value="2017年">2015年</option>
		   		<option value="2017年">2016年</option>
		   		<option value="2017年">2017年</option>
		   	</select>
		   	<select name="" id="">
		   		<option value="1月">1月</option>
		   		<option value="1月">2月</option>
		   		<option value="1月">3月</option>
		   		<option value="1月">4月</option>
		   		<option value="1月">5月</option>
		   		<option value="1月">6月</option>
		   		<option value="1月">7月</option>
		   		<option value="1月">8月</option>
		   		<option value="1月">9月</option>
		   		<option value="1月">10月</option>
		   		<option value="1月">11月</option>
		   		<option value="1月">12月</option>
		   	</select>
		   	<p>采集控制</p>
		   	<input style="width:80%;height:40px;margin-left:35px;" type="button" name="" value="手动采集" />
		   	<input style="width:80%;height:40px;margin-top:10px;margin-left:35px;" type="button" name="" value="自动采集" />
		   	
		</div>
		<div>
		    <span>报表类型</span><br />
		    <img style="margin-left:50px;width:72px;height:72px;" src="imgs/cc.png" alt="" />
		   	<img style="margin-left:70px;width:72px;height:72px;" src="imgs/dd.png" alt="" /><br />
		   	<input style="margin-left:60px;" type="radio" name="单一" />单一
		   	<input style="margin-left:100px;" type="radio" checked="checked" name="连续" />连续
		   	<input style="width:80%;height:40px;margin-left:35px;" type="button" name="" value="刷新报表" />
		   	<p>报表导出</p>
		   	<img style="margin-left:50px;width:72px;height:72px;" src="imgs/ccc.png" alt="" />
		   	<img style="margin-left:70px;width:72px;height:72px;" src="imgs/ddd.png" alt="" /><br />
		   	<input style="margin-left:60px;" type="radio" name="Excel" />Excel
		   	<input style="margin-left:100px;" type="radio" checked="checked" name="Word" />Word
		   	<input style="width:80%;height:40px;margin-left:35px;" type="button" name="" value="导出报表" />
		   	<p>报表打印</p>
		   	<input style="width:100px;height:40px;margin-left:50px;" type="button" name="" value="打印设置" />
		   	<input style="width:100px;height:40px;" type="button" name="" value="打印报表" />


		</div>
		<div>
		    <span>图表类型</span><br />
		   	<img style="margin-left:50px;width:72px;height:72px;" src="imgs/ee.png" alt="" />
		   	<img style="margin-left:70px;width:72px;height:72px;" src="imgs/ff.png" alt="" /><br />
		   	<input style="margin-left:50px;" type="radio" name="曲线图表" />曲线图表
		   	<input style="margin-left:70px;" type="radio" checked="checked" name="棒状图表" />棒状图表
		   	<p>通道选择</p>
		   	<input type="checkbox" name="" value="" />01
		   	<img src="imgs/01.png" alt="" />
		   	<select name="" id="">
		   		<option value="平均温度">平均温度</option>
		   		<option value="平均温度">最高温度</option>
		   		<option value="平均温度">最低温度</option>
		   	</select><br />
		   	<input type="checkbox" name="" value="" />02
		   	<img src="imgs/02.png" alt="" />
		   	<select name="" id="">
		   		<option value="平均温度">平均温度</option>
		   		<option value="平均温度">最高温度</option>
		   		<option value="平均温度">最低温度</option>
		   	</select><br />
		   	<input type="checkbox" name="" value="" />03
		   	<img src="imgs/03.png" alt="" />
		   	<select name="" id="">
		   		<option value="平均温度">平均温度</option>
		   		<option value="平均温度">最高温度</option>
		   		<option value="平均温度">最低温度</option>
		   	</select><br />
		   	<input type="checkbox" name="" value="" />04
		   	<img src="imgs/04.png" alt="" />
		   	<select name="" id="">
		   		<option value="平均温度">平均温度</option>
		   		<option value="平均温度">最高温度</option>
		   		<option value="平均温度">最低温度</option>
		   	</select><br />
		   	<input type="checkbox" name="" value="" />05
		   	<img src="imgs/05.png" alt="" />
		   	<select name="" id="">
		   		<option value="平均温度">平均温度</option>
		   		<option value="平均温度">最高温度</option>
		   		<option value="平均温度">最低温度</option>
		   	</select><br />
		   	<input type="checkbox" name="" value="" />06
		   	<img src="imgs/06.png" alt="" />
		   	<select name="" id="">
		   		<option value="平均温度">平均温度</option>
		   		<option value="平均温度">最高温度</option>
		   		<option value="平均温度">最低温度</option>
		   	</select><br />
		   	<input type="checkbox" name="" value="" />07
		   	<img src="imgs/07.png" alt="" />
		   	<select name="" id="">
		   		<option value="平均温度">平均温度</option>
		   		<option value="平均温度">最高温度</option>
		   		<option value="平均温度">最低温度</option>
		   	</select><br />
		   	<input type="checkbox" name="" value="" />08
		   	<img src="imgs/08.png" alt="" />
		   	<select name="" id="">
		   		<option value="平均温度">平均温度</option>
		   		<option value="平均温度">最高温度</option>
		   		<option value="平均温度">最低温度</option>
		   	</select>
		   	<p>图表控制</p>
		   	<input style="width:100px;height:40px;margin-left:50px;" type="button" name="" value="刷新图表" />
		   	<input style="width:100px;height:40px;" type="button" name="" value="存储图表" />




		</div>
	</div>
	<div class="right2">
		<span>天气情况:</span>
	</div>
	</div>
<!-- </div> -->
<script type="text/javascript">
	var tab = document.getElementById("tab")
	var oLi = tab.getElementsByTagName("li");
	var oDiv = tab.getElementsByTagName("div");
	for(var i=0;i<oLi.length;i++){
		// alert(i);
		oLi[i].setAttribute("num",i); //设置oLi属性并赋值
		oLi[i].onmouseover = function() 
		//每个li设置点击事件
		{
			// alert(i);
			// 
			for(var j=0;j<oLi.length;j++){
				oLi[j].style.background="";//重置li样式
					oDiv[j].style.display="";
					//重置div样式
			}		

			// console.log(i);
			// console.log(oLi[i]);
			var Num=this.getAttribute("num");
			//取出li中num属性的值
			this.style.background="orange";
			//设置当前li的样式
			oDiv[Num].style.display="block";
			//设置获取到的num值的div的样式		
		}	
			
		
	}
</script>
</body>
</html>